<script lang="ts"></script>

<template>
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="(item, index) in pageResult.list"
      :key="index"
      :url="`/pages/contributeDetail/contributeDetail?id=${item.id}`"
    >
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name"> 标题： {{ item.title }}</view>
      <view class="price">
        <text class="small">简介：</text>
        <text>{{ item.briefIntroduction }}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text"
    >{{ isFinish ? "没有更多的数据 " : "正在加载..." }}
  </view>
</template>

<script lang="ts" setup>
import { getContributeResult } from "./service/book-advertise";
import type { PageQuery, PageResult } from "@/types/mycontribute";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

// 请求的信息
const pageQuery = ref<PageQuery>({
  reviewResult: null, // 审核结果 -- review_result
  recommended: null, // 推荐了吗
  reviewInfo: null,
  title: null, // 稿件名称
  userId: null, // 上传者，添加对上传者的否定
  pageNo: 1,
  pageSize: 10,
});

// 请求信息
const isFinish = ref(false);
const pageResult = ref<PageResult>({
  total: 1, // total实际上后端没有返回
  pages: 0,
  list: [],
});

// 多选框信息
const localdataCheckList = [
  {
    text: "已推荐",
    value: 0,
  },
  {
    text: "已审核",
    value: 1,
  },
];

// 选择情况
const selectOptions = ref({
  restrict: [],
  title: "",
});

// 获取数据的逻辑函数
const addPageResult = () => {
  // 到达底部的判断
  if (pageResult.value.total <= pageResult.value.list.length) {
    // 只展示一次
    uni.showToast({
      title: "到达最底啦",
      duration: 2000,
    });

    return;
  }
  // 获取
  getMore();
};
// 真正获取数据的执行函数
const getMore = async () => {
  console.log("书本推荐component中，getmore中的pageQuery", pageQuery);
  // 构造query
  let query: PageQuery = pageQuery.value;
  console.log("selectOptions", selectOptions);

  if (selectOptions.value.restrict.includes(0)) {
    // 推荐标签
    query.recommended = 1;
  } else {
    query.recommended = null;
  }

  if (selectOptions.value.restrict.includes(1)) {
    // 审核标签
    query.reviewResult = 1;
  } else {
    query.reviewResult = null;
  }

  query.title = selectOptions.value.title;
  pageQuery.value = query;
  const res = await getContributeResult(query);
  console.log("recommend分页，getContributeResult，res:", res, res.data.list);

  // 记录新数据
  pageResult.value.list = pageResult.value.list.concat(res.data.list);
  pageResult.value.total = res.data.total;
  if (pageResult.value.total === pageResult.value.list.length) {
    isFinish.value = true;
  }

  // 往后来一页
  if (pageQuery.value.pageNo != null) {
    pageQuery.value.pageNo = pageQuery.value.pageNo + 1;
  }
};

// 滑动到最底部的时候
const onLowestOfScroll = () => {
  console.log("到达最底部");
  addPageResult();
};

// 启动查询
const onSelectSearch = () => {
  console.log("进行查询");
  //reset
  pageQuery.value.pageNo = 1;
  isFinish.value = false;
  pageResult.value.list = [];
  pageResult.value.total = 1;
  getMore();
};

// 启动时候执行
onLoad(() => {
  getMore();
});

// 暴露方法
defineExpose({
  onLowestOfScroll: onLowestOfScroll,
});
</script>

<style lang="scss">
page {
  height: 100%;
}

:host {
  display: block;
}

/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;

  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: "";
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 猜你喜欢 */
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;

  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }

  .image {
    width: 304rpx;
    height: 304rpx;
  }

  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: rgb(150, 150, 150);
    font-size: 26rpx;
  }

  .small {
    font-size: small;
    color: rgb(119, 117, 117);
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
